/** 每个按键基础样式类 **/
keyBlockCss = "keycapBlock";
/** 颜色输入框 样式 **/
colorInputCss = "colorInput";

/** 16 进制数值 **/
function getHex(num){
	var hexStr = ("0" + parseInt(num).toString(16)).slice(-2);
	
	return hexStr;
}

/** 获得背景颜色 **/
function getHexColor(colorStr){
	var rgb = colorStr;
	if(colorStr != null){
		var startIndex = colorStr.indexOf("(");
		if(startIndex >= 0){
			var endIndex = colorStr.indexOf(")");
			
			var colorNumber = colorStr.substring(startIndex + 1, endIndex);
			
			var colorArray = colorNumber.split(",");
			
			var one = parseInt(colorArray[0]);
			one = parseInt(colorArray[2]);
			
			rgb= "#" + getHex(colorArray[0]) + getHex(colorArray[1]) + getHex(colorArray[2]);
		}
		rgb = rgb.toUpperCase();
	}
	return rgb;
}


/** 设置颜色 **/
function setKeyColor(keyDom){
	/** 颜色值 **/
	var colorValue = $("input[type='text']", keyDom).val();
	
	var index = colorValue.indexOf("#");
	if(index != 0){
		colorValue = "#" + colorValue;
		
		$("input[type='text']", keyDom).val(colorValue);
	}
	
	$(keyDom).css("background-color", colorValue);
	$('.' + colorInputCss, keyDom).slideUp(50);
}

/** 显示 color input **/
function showColorInput(keyDom){
	var colorInput = $('.' + colorInputCss, keyDom).slideDown(50);
	
	$("input[type='text']", keyDom).select();
}

/** 页面初始化 **/
function initKeyColor(){
	
	$("." + keyBlockCss).each(function(index, oneEle){
		//当前 key id
		var keyId = $(oneEle).attr('id');
		
		
		//先判断当前 key 是否已包含 input
		var inputArray = $('.' + colorInputCss, oneEle);
		
		if(inputArray.length > 0){
			
		}else{
			$(oneEle).attr("title", keyId);
			
			//添加 color input
			var inputMain = $("<div class='colorInput'></div>");
			
			var inputHtml = "<input type='text' />";
			inputHtml = inputHtml + "<input type='button' value='确定' />";
			
			$(inputMain).html(inputHtml);
			
			$(oneEle).append(inputMain);
			
			//回填
			var nowColor = $(oneEle).css('background-color');
			if(nowColor != null){
				nowColor = getHexColor(nowColor);
				
				$("input[type='text']", oneEle).val(nowColor);
			}
			
			//绑定click 事件
			$(oneEle).click(function(e){
				e.stopPropagation();
				showColorInput($(this));
			});
			
			$("input[type='button']", oneEle).click(function(e){
				e.stopPropagation();
				setKeyColor($(oneEle));
			});
		}
		
		/*
		<div class="colorInput">
			<input type="text" />
			<input type="button" value="确定" />
		</div>
		*/
	})
}

/** 测试数值 **/
function getTestColor(){
	var testRed = $("#testRed").val();
	var testGreen = $("#testGreen").val();
	var testBlue = $("#testBlue").val();
	
	if(testRed != "" && testGreen != "" && testBlue != ""){
		try{
			var rgb= "#" + getHex(testRed) + getHex(testGreen) + getHex(testBlue);
			
			$("#testColor").val(rgb);
		}catch(e){
			alert("请输入正确数值！");
		}
	}
}

/** 监听颜色转换 **/
function listenColor(){
	$("#testRed").change(function(){
		getTestColor();
	});
	$("#testGreen").change(function(){
		getTestColor();
	});
	$("#testBlue").change(function(){
		getTestColor();
	});
}

$(document).ready(function(){
	
	initKeyColor();
	
	listenColor();
	
	$("#colorDataArea").val(defaultColorData);
	
	importrColorData();
});

/** 显示所有颜色值 **/
function showAllInput(){
	$("." + keyBlockCss).each(function(index, oneEle){
		showColorInput($(this));
	});
}

/** 渲染所有颜色 **/
function renderingAllColor(){
	$("." + keyBlockCss).each(function(index, oneEle){
		setKeyColor($(this));
	});
}

/** 更改背光，背景 **/
function changeBgcolor(){
	var keybordBg = $("#keybordBg").val();
	var bgLight = $("#keyLight").val();
	
	if(keybordBg != ""){
		var index = keybordBg.indexOf("http");
		if(index >= 0){//图片
			$("#colorKeyDIv").css("background", "url(" + keybordBg + ") repeat");
		}else{
			$("#colorKeyDIv").css("background", "");
			$("#colorKeyDIv").css("background-color", keybordBg);
		}
	}
	
	if(bgLight != ""){
		$("." + keyBlockCss).each(function(index, oneEle){
			$(this).css("color", bgLight);
		});
	}
	
}

/** 导出到文本域 **/
function exportColorData(){
	var i = 1;
	
	var colorData = '';
	
	$("." + keyBlockCss).each(function(index, oneEle){
		var keyId = $(oneEle).attr('id');
		var oneColor = $("input[type='text']", oneEle).val();
		
		if(i > 1){
			colorData = colorData + ",";
			
			var num = i%6;
			if(num == 0){
				colorData = colorData + "\n";
			}
		}
		
		colorData = colorData + keyId + ":" + oneColor;
		
		i++;
	});
	
	$("#colorDataArea").val(colorData);
}

/** 从文本域导入 **/
function importrColorData(){
	var colorData = $("#colorDataArea").val();
	
	colorData = colorData.replace(/(\s+)|(\n+)|(,$)/g, "");
	
	var colorArray = colorData.split(",");
	
	$.each(colorArray, function(index, oneColor) {
		
		var spi = oneColor.indexOf(":");
		
		if(spi > 0){
			var keyId = oneColor.substring(0, spi);
			
			var keyColor = oneColor.substring(spi+1);
			
			if(keyColor != ""){
				var keyDom = $("#" + keyId);
				$("input[type='text']", keyDom).val(keyColor);
				$(keyDom).css("background-color", keyColor);
			}
		}
	});
}